Skip to content

[mercury] Add the viteMercury plugin for Vite environments #646

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
wants to merge 14 commits into
base: main
Choose a base branch
from
Draft

[mercury] Add the viteMercury plugin for Vite environments #646

wants to merge 14 commits into from

Conversation

ncamera
Copy link
Collaborator

@ncamera ncamera commented Sep 15, 2025

This plugin replaces the need for using the CLI in Vite environments.

@ncamera
Set bundle mappings in the window
4ae1e30 
This will help us to avoid issues when the Mercury dependency is duplicated. Also, this help us to set this mapping inline in the HTML.
@ncamera
Add an utility to calculate the gzip size of files that are downloade…
6a435b7 
…d to the browser
@ncamera
Improve how the bundle sizes are printed to the output
7cb9bcd
@ncamera
Add the viteMercury plugin for Vite environments
92589fa 
This plugin replaces the need for using the CLI in Vite environments.
@ncamera
Add tests for validating the bundle size
8f4630f
@ncamera
Add tests for validating the gzipped size
7a692c1
@ncamera
Add support to inline css bundles in the html head
665b6a7
@ncamera
Improve path normalization
fcf8945
@ncamera
Add support to preload CSS bundles
c68cf6a 
Also, inline the base/base bundle by default and preload the base/icons bundle by default.
@ncamera
Add support to specify the fetch priority
183007b 
Also, fix default values for mercuryOptions
@ncamera
Add comment for an upcoming feature (lightningcss)
d4be7f6
@ncamera ncamera added feature Feature implementation pull request mercury Changes related to Mercury design system performance Work related to imporving the performance in the Design System target: minor This PR is targeted for the next minor release labels Sep 15, 2025
@ncamera ncamera marked this pull request as draft September 15, 2025 02:51
@ncamera
Inline the "resets/box-sizing" css bundle by default
91cbaff
@ncamera
Split the Mercury DS implementation into the mercury-build, mercury-c…
5a2e6dc 
…li and vite-mercury-plugin packages

Now, @genexus/mercury only contains the core of Mercury, and we have packages for bulding Mercury, using it through out a CLI, and a plugin to work with Vite.

Breaking changes:
 - The default path for the fonts is now "/assets/fonts/" instead of "./assets/fonts/"

 - The default path for the icons is now "/assets/icons/" instead of "./assets/icons/"
@ncamera
Add support to build the Mercury CSS bundles
e811a8a
github-advanced-security[bot]
github-advanced-security bot found potential problems Oct 12, 2025
View reviewed changes
packages/mercury-build/src/build/internal/transpile-bundle-and-create-mappings.ts
Comment on lines +50 to +52
fileDir: fileMetadata.dir
.replace(MERCURY_DIST_RELATIVE_FOLDERS.DIST_BUNDLES_SCSS, "")
.replace("\\", "/")

Check failure

Code scanning / CodeQL

Incomplete string escaping or encoding High

This replaces only the first occurrence of "\".

Copilot Autofix

AI about 9 hours ago

The best fix is to change .replace("\\", "/") to use a global replacement, changing all backslashes in the path, not just the first one. This can be done by switching the argument to replace to a regular expression: .replace(/\\/g, "/"). This approach is concise, robust, and doesn't require any additional method definitions or third-party imports since the RegExp is supported natively. Only a single line change is necessary, at line 52 in packages/mercury-build/src/build/internal/transpile-bundle-and-create-mappings.ts.

Suggested changeset 1
packages/mercury-build/src/build/internal/transpile-bundle-and-create-mappings.ts

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/packages/mercury-build/src/build/internal/transpile-bundle-and-create-mappings.ts b/packages/mercury-build/src/build/internal/transpile-bundle-and-create-mappings.ts
--- a/packages/mercury-build/src/build/internal/transpile-bundle-and-create-mappings.ts
+++ b/packages/mercury-build/src/build/internal/transpile-bundle-and-create-mappings.ts
@@ -49,7 +49,7 @@
   BUNDLES.push({
     fileDir: fileMetadata.dir
       .replace(MERCURY_DIST_RELATIVE_FOLDERS.DIST_BUNDLES_SCSS, "")
-      .replace("\\", "/")
+      .replace(/\\/g, "/")
   });
 
   const transpiledBundle = transpileBundle(filePath, true);
EOF
@@ -49,7 +49,7 @@
BUNDLES.push({
fileDir: fileMetadata.dir
.replace(MERCURY_DIST_RELATIVE_FOLDERS.DIST_BUNDLES_SCSS, "")
.replace("\\", "/")
.replace(/\\/g, "/")
});

const transpiledBundle = transpileBundle(filePath, true);
Copilot is powered by AI and may make mistakes. Always verify output.
packages/mercury-build/src/build/internal/transpile-bundle-and-create-mappings.ts
Comment on lines +119 to +121
fileDir: fileMetadata.dir
.replace(MERCURY_SRC_RELATIVE_FOLDERS.SRC_BUNDLES_SCSS, "")
.replace("\\", "/")

Check failure

Code scanning / CodeQL

Incomplete string escaping or encoding High

This replaces only the first occurrence of "\".

Copilot Autofix

AI about 9 hours ago

To safely replace all backslashes in the directory string with forward slashes, change .replace("\\", "/") to .replace(/\\/g, "/"). This uses a regular expression with the global (g) flag to ensure all backslashes are replaced, regardless of how many are present. The modification should be made directly on line 121 in packages/mercury-build/src/build/internal/transpile-bundle-and-create-mappings.ts. No new imports or external libraries are required—the built-in String.replace with regex is sufficient and correct.

Suggested changeset 1
packages/mercury-build/src/build/internal/transpile-bundle-and-create-mappings.ts

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/packages/mercury-build/src/build/internal/transpile-bundle-and-create-mappings.ts b/packages/mercury-build/src/build/internal/transpile-bundle-and-create-mappings.ts
--- a/packages/mercury-build/src/build/internal/transpile-bundle-and-create-mappings.ts
+++ b/packages/mercury-build/src/build/internal/transpile-bundle-and-create-mappings.ts
@@ -118,7 +118,7 @@
   BUNDLES.push({
     fileDir: fileMetadata.dir
       .replace(MERCURY_SRC_RELATIVE_FOLDERS.SRC_BUNDLES_SCSS, "")
-      .replace("\\", "/")
+      .replace(/\\/g, "/")
   });
 
   const transpiledBundle = transpileBundle(actualFilePath, hasGlobantVariant);
EOF
@@ -118,7 +118,7 @@
BUNDLES.push({
fileDir: fileMetadata.dir
.replace(MERCURY_SRC_RELATIVE_FOLDERS.SRC_BUNDLES_SCSS, "")
.replace("\\", "/")
.replace(/\\/g, "/")
});

const transpiledBundle = transpileBundle(actualFilePath, hasGlobantVariant);
Copilot is powered by AI and may make mistakes. Always verify output.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

feature Feature implementation pull request mercury Changes related to Mercury design system performance Work related to imporving the performance in the Design System target: minor This PR is targeted for the next minor release

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@ncamera